<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-content
					style="position: relative;background: #ffffff !important;">
				<right-top icon="6.png" text="热点追踪">

					<div v-cloak v-show="ruleFlag == 1" class="addyj" style="background-color:#00b14e;color:white;"
					     @click="showWarning"><span style="margin-left:20px;cursor:pointer;font-size: 14px;">添加预警</span>
					</div>

					<a-tabs default-active-key="2" size="small" style="position: absolute;right: 40px;top: 22px;font-weight: 400;"
					        @change="callback">
						<a-tab-pane key="1" tab="热点总览"></a-tab-pane>
						<a-tab-pane key="2" force-render tab="预警管理"></a-tab-pane>
					</a-tabs>
				</right-top>
				<div v-show="change==1" class="right-content">
					<Hotspottrackingechart></Hotspottrackingechart>
				</div>

				<div v-show="change==2" class="right-content">
					<div class="buttonDiv" style="">
						<a-form-model :model="form1" layout="inline">

							<a-row style="margin-top: 20px;">
								<a-col :span="6" style="margin-left:15px">
									<a-form-model-item :colon="false" :label-col="{span:6}" :wrapper-col="{span:15,push:1}"
									                   class="time1" label="预警内容"
									                   style="width: 100%;margin-left: 8.6%;display: flex;align-items: center">
										<a-input v-model="form1.title" style="width:200px"/>
									</a-form-model-item>
								</a-col>
								<a-col :span="6" style="margin-left:5px">
									<a-form-model-item :colon="false" :label-col="{span:6}" :wrapper-col="{span:15,push:1}"
									                   class="time1" label="预警平台"
									                   style="width: 100%;margin-left: -60px;display: flex;align-items: center">
										<a-select v-model="form1.platform" default-value="全部" style="width:160px">
											<a-select-option value="">全部</a-select-option>
											<a-select-option value="微博热搜">微博热搜</a-select-option>
											<a-select-option value="今日头条">今日头条</a-select-option>
											<a-select-option value="百度热搜">百度热搜</a-select-option>

										</a-select>
									</a-form-model-item>
								</a-col>
								<a-col :span="3" style="margin-left:-20px">
									<a-form-model-item :colon="false" class="time1" label="预警时间"
									                   style="width: 100%;margin-left: -135px;display: flex;align-items: center">
										<a-date-picker v-model="form1.releaseTimeStart" format="YYYY-MM-DD HH:mm:ss" show-time/>
									</a-form-model-item>
								</a-col>
								<a-col :span="2">
									<a-form-model-item :colon="false" class="time1" label="~"
									                   style="width: 100%;margin-left: -132px;display: flex;align-items: center">
										<a-date-picker v-model="form1.releaseTimeEnd" format="YYYY-MM-DD HH:mm:ss" show-time/>
									</a-form-model-item>
								</a-col>
								<a-col :span="6">
									<a-button style="color: black;" @click="searchData"><img src="../../assets/images/system/fangda.png"
									                                                         style="margin-right: 3px;"/>查询
									</a-button>
									<a-button style="margin-left:10px;color:black" @click="reset">重置
									</a-button>
									<a-button style="margin-left:10px;color:black;" @click="del">删除
									</a-button>
									<a-button style="margin-left:10px;color:black;" @click="goHomePage">返回
									</a-button>
								</a-col>


							</a-row>
						</a-form-model>
						<a-table :columns="columns" :data-source="data"
						         :pagination="pagination"
						         :row-selection="{ selectedRowKeys: selectedRowKeys,
                                   onChange: onSelectChange }"
						         style="margin-top: 10px;padding: 0 70px 0 70px;"
						>
                            <span slot="action" slot-scope="text, record">
                                <span style=";cursor:pointer;color:#1890ff" @click="addLetters">生成快报</span>
                                 <span style="margin-left:20px;cursor:pointer;color:#1890ff"
                                       @click="weibosofo">详情</span>
                                 <span style="margin-left:20px;cursor:pointer;color:#1890ff"
                                       @click="del(record)">删除</span>
                            </span>
							<span slot="title1" slot-scope="text, record" style="cursor : pointer;" @click="handleClickRow(record)">
                              {{ record.title }}
                            </span>
							<span slot="emotionalPolarity" slot-scope="text,record">
                                <a-popover title="" trigger="hover">
                                        <a-button v-if="record.emotionalPolarity==3"
                                                  style="background-color:#ff892a;border:1px solid #ff892a"
                                                  type="primary">
                                            负面
                                        </a-button>
                                        <a-button v-if="record.emotionalPolarity==2" style="" type="primary">
                                            中性
                                        </a-button>
                                        <a-button v-if="record.emotionalPolarity==1"
                                                  style="background-color:#1ea000;border:1px solid #1ea000"
                                                  type="primary">
                                            正面
                                        </a-button>
                                        <template slot="content">
                                            <p v-if="!(record.emotionalPolarity==1)" style="cursor:pointer"
                                               @click="changebuttonzm(record.id,1)">标注正面</p>
                                            <p v-if="!(record.emotionalPolarity==2)" style="cursor:pointer"
                                               @click="changebuttonzm(record.id,2)">标注中性</p>
                                            <p v-if="!(record.emotionalPolarity==3)" style="cursor:pointer"
                                               @click="changebuttonzm(record.id,3)">标注负面</p>
                                        </template>

                                    </a-popover>
                            </span>
						</a-table>

					</div>

					<a-modal :key="num" v-model="visible3" :cancel-button-props="{ style: { display: 'none' } }"
					         class="modal-box2" ok-text="确定保存" style="height:100px"
					         title="添加快报" width="720px" @ok="hideModal3">
						<div style="height:600px;overflow-y:auto">
							<a-row>
								<a-form-model
										ref="ruleForm"
										:label-col="labelCol1"
										:model="form"
										:rules="rules"
										:wrapper-col="wrapperCol1"
								>

									<a-form-model-item ref="title" label="事件标题" prop="title">
										<a-input
												v-model="form.title"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>

									<a-form-model-item ref="name" label="发布媒体" prop="sendmedia">
										<a-input
												v-model="form.sendmedia"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-form-model-item label="事件等级" prop="eventType">
										<a-select v-model="form.eventType" placeholder="请选择">
											<a-select-option value="3">
												重大
											</a-select-option>
											<a-select-option value="2">
												中等
											</a-select-option>
											<a-select-option value="1">
												一般
											</a-select-option>
										</a-select>
									</a-form-model-item>

									<a-row style="margin-left:22px">
										<a-col :span="11">

											<a-form-model-item label="事件分类" prop="eventclasssify">
												<a-select v-model="form.eventclasssify" class="eventtype" placeholder="请选择"
												          style="margin-left:5px" @change="event_classify">
													<a-select-option v-for="(item,i) in oneeventtype" :key="i" :value="item.id">
														{{ item.name }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="" prop="eventclasssify1">
												<a-select v-model="form.eventclasssify1" class="eventtype1" placeholder="请选择"
												          @change="event_classify1">
													<a-select-option v-for="(index,key) in two_classify" :key="key" :value="index.id">
														{{ index.name }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="6">
											<a-form-model-item label="" prop="eventclasssify2">
												<a-select v-model="form.eventclasssify2" class="eventtype2" placeholder="请选择">
													<a-select-option v-for="(index,key) in three_classfy" :key="key" :value="index.id">
														{{ index.name }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>
									<a-form-model-item ref="name" label="关键词" prop="key">
										<a-input
												v-model="form.key"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>

									<a-form-model-item label="内容简介" prop="content">
										<a-input v-model="form.content" type="textarea"/>
									</a-form-model-item>
									<a-form-model-item ref="name" label="原文链接" prop="originallink">
										<a-input
												v-model="form.originallink"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-form-model-item ref="name" label="原文标题" prop="origintitle">
										<a-input
												v-model="form.origintitle"
												@blur="() => {$refs.name.onFieldBlur();}"
										/>
									</a-form-model-item>
									<a-row>
										<a-col :span="13">
											<a-form-model-item label="移动相关" prop="mobilerelated" style="margin-left:25px">
												<a-select v-model="form.mobilerelated" class="eventtype" placeholder="请选择">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
										<a-col :span="11">
											<a-form-model-item label="业务影响" prop="businessimpact">
												<a-select v-model="form.businessimpact" class="eventtype3" placeholder="请选择">
													<a-select-option v-for="(item,i) in businessimpactoption" :key="i" :value="item.id">
														{{ item.name }}
													</a-select-option>

												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row style="margin-left:22px">
										<a-col :span="12">

											<a-form-model-item label="省份" prop="province01">
												<a-select v-model="form.province01" class="eventtype" placeholder="请选择">
													<a-select-option v-for="(item,i) in getprovice" :key="i" :value="item.name">
														{{ item.name }}
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

										<a-col :span="12" style="padding-left: 2.5%;">
											<a-form-model-item label="情感极性" prop="emotionalAcute">
												<a-select v-model="form.emotionalAcute" class="eventtype3" placeholder="请选择">
													<a-select-option :value="1">
														正面
													</a-select-option>
													<a-select-option :value="2">
														中性
													</a-select-option>
													<a-select-option :value="3">
														负面
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>
									<a-row>
										<a-form-model-item class="checkboxs" label="关联部门" prop="relatedepart">
											<div style="z-index: 999; padding-left:5px;background-color:#ebf3fe"><span>信安中心</span>
												<img :style="xazx_c?'':'display:none'" alt="" src="../../assets/images/generalDetection/28.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showxazx">
												<img :style="xazx_c?'display:none':''" alt="" src="../../assets/images/generalDetection/27.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showxazx">
											</div>
											<a-checkbox-group v-model="form.xazx">

												<a-checkbox v-for="(item,i) in department_xa" :key="i" :value="item.id" name="type">
													{{ item.name }}
												</a-checkbox>

											</a-checkbox-group>
											<div style="z-index:999; padding-left:5px;background-color:#ebf3fe"><span>集团</span>

												<img :style="jt_c?'display:block':'display:none'" alt=""
												     src="../../assets/images/generalDetection/28.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showjt">
												<img :style="jt_c?'display:none':'display:block'" alt=""
												     src="../../assets/images/generalDetection/27.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showjt"></div>
											<a-checkbox-group v-model="form.jt">
												<a-checkbox v-for="(item,i) in department_jt" :key="i" :value="item.id" name="type">
													{{ item.name }}
												</a-checkbox>

											</a-checkbox-group>
											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>省公司</span>
												<img :style="sgs_c?'display:block':'display:none'"
												     alt="" src="../../assets/images/generalDetection/28.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showsgs">
												<img :style="sgs_c?'display:none':'display:block'"
												     alt="" src="../../assets/images/generalDetection/27.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showsgs">
											</div>
											<a-checkbox-group v-model="form.sgs">
												<a-checkbox v-for="(item,i) in department_sgs" :key="i" :value="item.id" name="type">
													{{ item.name }}
												</a-checkbox>

											</a-checkbox-group>
											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>专业公司</span>
												<img :style="zygs_c?'':'display:none'" alt="" src="../../assets/images/generalDetection/28.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showzygs">
												<img :style="zygs_c?'display:none':''" alt="" src="../../assets/images/generalDetection/27.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showzygs"></div>
											<a-checkbox-group v-model="form.zygs">
												<a-checkbox v-for="(item,i) in department_zygs" :key="i" :value="item.id" name="type">
													{{ item.name }}
												</a-checkbox>

											</a-checkbox-group>

											<div style="z-index: 999;padding-left:5px;background-color:#ebf3fe"><span>其他</span>
												<img :style="qt_c?'display:block':'display:none'"
												     alt="" src="../../assets/images/generalDetection/28.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showqt">
												<img :style="qt_c?'display:none':'display:block'"
												     alt="" src="../../assets/images/generalDetection/27.jpg"
												     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
												     @click="showqt">
											</div>
											<a-checkbox-group v-model="form.relatedepart">
												<a-checkbox v-for="(item,i) in department_qt" :key="i" :value="item.id" name="type">
													{{ item.name }}
												</a-checkbox>


											</a-checkbox-group>

										</a-form-model-item>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item class="eventtype4" label="是否热搜" prop="ifsearch" style="margin-left:24px">
												<a-select v-model="form.ifsearch" placeholder="" @change="ifresou">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-show="resou_event">
										<a-col :span="13">
											<a-form-model-item ref="searchlist" label="热搜榜" prop="searchlist" style="margin-left:25px">
												<a-input v-model="form.searchlist"
												         style="margin-left :20px;width:180px"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>

										</a-col>
										<a-col :span="11">
											<a-form-model-item ref="searchrank" label="热搜名次" prop="searchrank" style="margin-left:15px">
												<a-input v-model="form.searchrank"
												         style="margin-left:20px;width:180px"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>

										</a-col>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item class="eventtype4" label="是否诈骗" prop="ifzp" style="margin-left:24px">
												<a-select v-model="form.ifzp" default-value="1" placeholder="" @change="if_zhapian">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-show="zhapian_option">
										<a-col :span="24">
											<a-form-model-item class="checkboxs" label="诈骗事件" prop="zp_event" style="">
												<a-checkbox-group v-model="form.zp_event">
													<a-checkbox name="type" value="1">网络电信诈骗</a-checkbox>
													<a-checkbox name="type" value="2">兼职诈骗</a-checkbox>
													<a-checkbox name="type" value="3">刷单诈骗</a-checkbox>
													<a-checkbox name="type" value="4">游戏诈骗</a-checkbox>
													<a-checkbox name="type" value="5">新冠诈骗</a-checkbox>
													<a-checkbox name="type" value="6">投资诈骗</a-checkbox>
													<a-checkbox name="type" value="7">考试诈骗</a-checkbox>
													<a-checkbox name="type" value="8">社保诈骗</a-checkbox>
													<a-checkbox name="type" value="9">ETC诈骗</a-checkbox>
													<a-checkbox name="type" value="10">银行(卡)诈骗</a-checkbox>
													<a-checkbox name="type" value="11">快递诈骗</a-checkbox>
												</a-checkbox-group>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row>
										<a-col :span="15">
											<a-form-model-item class="eventtype4" label="是否漏洞" prop="ifld" style="margin-left:24px">
												<a-select v-model="form.ifld" placeholder="" @change="if_loudong">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>
									</a-row>
									<a-row v-if="loudong_option">
										<a-col :span="24">
											<a-form-model-item class="checkboxs" label="漏洞事件" prop="ld_event" style="">
												<a-checkbox-group v-model="form.ld_event">
													<a-checkbox name="type" value="1">国家安全漏洞库</a-checkbox>
													<a-checkbox name="type" value="2">网络漏洞</a-checkbox>
												</a-checkbox-group>
											</a-form-model-item>
										</a-col>
									</a-row>

									<a-row>
										<a-col :span="15">
											<a-form-model-item class="eventtype4" label="漏洞库" prop="vulnerdata" style="margin-left:25px">
												<a-select v-model="form.vulnerdata" placeholder="" @change="loudongku">
													<a-select-option value="1">
														是
													</a-select-option>
													<a-select-option value="2">
														否
													</a-select-option>
												</a-select>
											</a-form-model-item>
										</a-col>

									</a-row>

									<a-row v-if="loudongku_event">
										<a-col :span="12">
											<a-form-model-item label="漏洞公开日期" prop="vulnepublic" required style="margin-left:25px">
												<a-date-picker
														v-model="form.vulnepublic"
														placeholder="请选择"
														show-time
														style="width: 65%;margin-left:15px"
														type="date"
												/>
											</a-form-model-item>
										</a-col>
										<a-col :span="11">
											<a-form-model-item ref="CVEID" label="CVE ID" prop="CVEID">
												<a-input v-model="form.CVEID"
												         style="margin-left:30px;width:180px"
												         @blur="() => {$refs.name.onFieldBlur();}"
												/>
											</a-form-model-item>
										</a-col>
									</a-row>


								</a-form-model>


							</a-row>
						</div>
					</a-modal>
				</div>


				<a-modal v-model="visible" :cancel-button-props="{ style: { display: 'none' } }" ok-text="开始监测"
				         style="height:500px" title="添加预警"
				         width="650px" @ok="hideModal">

					<warningAdd v-bind:parent="parent" v-bind:warningFlag="warningFlag"></warningAdd>

				</a-modal>

				<a-modal v-model="visible4" :bodyStyle="{'display': 'flex','justify-content': 'center','align-items': 'center'}"
				         :cancel-button-props="{ style: { display: 'none' } }" :footer="false" class="modal-box"
				         title="预览"
				         width="40%">
					<div id="preview" ref="preview" style="padding-bottom: 20px;overflow: auto;text-align: center;">
						<el-image
								:src="previewPic"
								style="width: auto; height: auto">
						</el-image>
					</div>
				</a-modal>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'
import {getInfo} from '@/api/system/info'
import {getIndexMiddle} from '@/api/home/home.js'
import {
	addWarning,
	deletedetaildata,
	getHotTrackHotSearchList,
	hotTrand,
	updateEmotionalPolarity
} from '@/api/HotSpotTracking/hotTracking'
import {
	addreport,
	businessimpactoption,
	getDepartment,
	getprovice,
	oneEventtype,
	threeEventtype,
	twoEventtype
} from "@/api/reports/reports";
import hotspottrackingechart from '@/views/HotSpotTracking/hotspottrackingechart.vue'
import warningAdd from "@/views/HotSpotTracking/warningAdd.vue";
import moment from "moment";
import {screenshotInfo} from '@/api/file/fileManager'
import md5 from 'js-md5'

const docx = require('docx-preview');
const columns = [
	{
		title: '序号',
		dataIndex: 'index',
		key: 'key',
		align: 'center',
		customRender: (text, record, index) => `${index + 1}`,
	},
	{
		title: '预警内容',
		dataIndex: 'title',
		key: 'title',
		align: 'center',
		scopedSlots: {customRender: 'title1'},
	},
	{
		title: '预警平台',
		dataIndex: 'platform',
		key: 'platform',
		align: 'center',
	},
	{
		title: '预警时间',
		dataIndex: 'releaseTime',
		key: 'releaseTime',
		align: 'center'
	},
	{
		title: '倾向性',
		dataIndex: 'emotionalPolarity',
		key: 'emotionalPolarity',
		align: 'center',
		scopedSlots: {customRender: 'emotionalPolarity'},
	},
];

const data = []

export default {
	name: "generalDetection",
	components: {
		left,
		rightTop,
		Hotspottrackingechart: hotspottrackingechart,
		warningAdd: warningAdd,
	},
	data() {
		return {
			num: Math.random(),
			ruleFlag: 1, // 判断角色是否是普通业务人员角色
			department_xa: [],
			parent: this,
			department_jt: [],
			department_sgs: [],
			department_zygs: [],
			department_qt: [],
			businessimpactoption: [],
			rowData: [],
			previewPic: "",
			xazx_c: true,
			jt_c: true,
			sgs_c: true,
			zygs_c: true,
			qt_c: true,
			visible: false,
			visible4: false,
			warningFlag: undefined, //点击添加预警后 根据当前字段清空子组件数据
			loading: true,
			loadingMore: false,
			showLoadingMore: true,
			change: 2,
			listData: [],
			zhapian_option: false,
			loudong_option: false,
			resou_event: false,
			loudongku_event: false,
			one_classify: [],
			two_classify: [],
			three_classfy: [],
			visible3: false,
			collspanQuery: true,
			warningForm: {},//添加预警form
			form: {
				title: '',
				submittime: '',
				sendtime: '',
				sendmedia: undefined,
				eventType: undefined,
				eventclasssify: undefined,
				eventclasssify1: undefined,
				eventclasssify2: undefined,
				key: undefined,
				emotionalAcute: undefined,
				userId: undefined,
				content: undefined,
				originallink: undefined,
				origintitle: undefined,
				mobilerelated: undefined,
				businessimpact: undefined,
				province01: undefined,
				province02: undefined,
				province03: undefined,
				relatedepart: undefined,
				ifsearch: undefined,
				ifzp: undefined,
				ifld: undefined,
				zp_event: undefined,
				ld_event: undefined,

				searchlist: undefined,
				searchrank: undefined,
				vulnerdata: undefined,
				vulnepublic: undefined,
				CVEID: undefined,
				xazx: [],
				jt: [],
				sgs: [],
				zygs: [],


			},
			rules1: {
				taskName: [
					{required: true, message: '请输入任务名称', trigger: 'blur'},
				],
				warningKeyword: [
					{required: true, message: '请输入预警关键词', trigger: 'blur'},
					{min: 2, max: 10, message: '字数在2-10个之间', trigger: 'blur'},
				],
				warningPlatform: [
					{required: true, message: '请勾选预警平台', trigger: 'blur'},
				],
				rank: [
					{required: true, message: '请选择预警形式', trigger: 'blur'},
				],
			},
			rules: {
				title: [
					{required: true, message: '请输入标题', trigger: 'blur'},

				],
				sendmedia: [
					{required: true, message: '请输入发布媒体', trigger: 'blur'},

				],
				key: [
					{required: true, message: '请输入关键字', trigger: 'blur'},

				],
				content: [
					{required: true, message: '请输入内容', trigger: 'blur'},

				],
				originallink: [
					{required: true, message: '请输入原文链接', trigger: 'blur'},

				],
				searchlist: [
					{required: true, message: '请输入热搜榜', trigger: 'blur'},

				],
				CVEID: [
					{required: true, message: '请输入事件名称', trigger: 'blur'},

				],
				searchrank: [
					{required: true, message: '请输入热搜名次', trigger: 'blur'},

				],
				origintitle: [
					{required: true, message: '请输入原文标题', trigger: 'blur'},

				],

				region: [{required: true, message: 'Please select Activity zone', trigger: 'change'}],
				submittime: [{required: true, message: '请选择', trigger: 'change'}],
				sendtime: [{required: true, message: '请选择', trigger: 'change'}],
				province02: [{required: true, message: '请选择', trigger: 'change'}],
				province03: [{required: true, message: '请选择', trigger: 'change'}],
				eventType: [{required: true, message: '请选择', trigger: 'change'}],
				eventclasssify: [{required: true, message: '请选择', trigger: 'change'}],
				eventclasssify1: [{required: true, message: '请选择', trigger: 'change'}],
				eventclasssify2: [{required: true, message: '请选择', trigger: 'change'}],
				mobilerelated: [{required: true, message: '请选择', trigger: 'change'}],
				businessimpact: [{required: true, message: '请选择', trigger: 'change'}],
				emotionalAcute: [{required: true, message: '请选择', trigger: 'change'}],
				ifsearch: [{required: true, message: '请选择', trigger: 'change'}],
				ifzp: [{required: true, message: '请选择', trigger: 'change'}],
				ifld: [{required: true, message: '请选择', trigger: 'change'}],
				vulnerdata: [{required: true, message: '请选择', trigger: 'change'}],
				zp_event: [{
					type: 'array',
					required: true, message: '请选择', trigger: 'change'
				}],
				xazx: [{type: 'array', required: true, message: '请选择', trigger: 'change'}],
				jt: [{type: 'array', required: true, message: '请选择', trigger: 'change'}],
				sgs: [{type: 'array', required: true, message: '请选择', trigger: 'change'}],
				zygs: [{type: 'array', required: true, message: '请选择', trigger: 'change'}],
				ld_event: [{required: true, message: '请选择', trigger: 'change'}],
				relatedepart: [
					{
						type: 'array',
						required: true,
						message: '请选择',
						trigger: 'change',
					},
				],
				resource: [
					{required: true, message: 'Please select activity resource', trigger: 'change'},
				],
				desc: [{required: true, message: 'Please input activity form', trigger: 'blur'}],
			},
			form1: {
				title: '',
				domain: '通用事件',
				classification: '全部',
				mediaType: 1,
				platform: "",
				releaseTimeStart: "",
				releaseTimeEnd: "",
			},
			labelCol1: {span: 4},
			wrapperCol1: {span: 18},
			changebuttonSelectStyle: '全部',
			middle_value: '全部',
			columns,
			data,
			pagination: {
				current: 1,
				onChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.searchDatapage();
				},
				onShowSizeChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
					this.searchDatapage();
				},
				pageSize: 10,
				total: 0,
				showSizeChanger: true,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
				showTotal: total => `共 ${total}条`,
				showQuickJumper: true
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			orderBy: false,
			mediaFlag: 1,
			mediaStyle: 'background: #1677FF;color: #fff;cursor:pointer;',
			collspanMedia: true,
			total: 0,
			label: '',
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			dataLevelDate: [],
			selectedRowKeys: [],
			changeSelectStyle: '全部',
			changeSelectStyles: '全部',
			weibomsg: [],
		}
	},
	methods: {
		previewFile(record) {
			let params = {}
			var that = this;
			screenshotInfo(params).then(res => {
				this.visible4 = true
				let picurl = res + md5(record.title) + record.releaseTimeLong + record.platform + ".png"
				$.ajax({
					url: picurl,
					type: 'GET',
					success: function (response) {
						that.previewPic = picurl;
					},
					error: function () {
						that.previewPic = "";
					}
				});

			}).catch(error => {
				console.log(error);
			})
		},
		changebuttonzm(id, value) {
			var param2 = {
				id: id,
				value: value
			}
			confirm('确定修改该记录吗？', () => {
				updateEmotionalPolarity(param2).then(res1 => {
					if (res1.data == true) {
						this.$message.success("修改成功");
						this.searchData()
					}
				})
			});
		},
		event_classify(value) {
			let params = {
				oneEventType: value
			}
			twoEventtype(
					params
			).then(res => {
				this.two_classify = res.data
			})
		},
		event_classify1(value) {
			let params = {
				twoEventType: value
			}
			threeEventtype(
					params
			).then(res => {
				this.three_classfy = res.data
			})
		},
		reset() {
			this.form1.title = ''
			this.form1.platform = ''
			this.form1.releaseTimeStart = ''
			this.form1.releaseTimeEnd = ''
		},

		searchDatapage() {
			if (this.form1.releaseTimeStart && this.form1.releaseTimeEnd) {
				let start = new Date(this.form1.releaseTimeStart)
				let end = new Date(this.form1.releaseTimeEnd)
				if (start.getTime() > end.getTime()) {
					this.$message.error('起始时间不可以大于结束时间，请重新输入！')
					return;
				}
			}

			let param = {
				page: this.pagination.current,
				pageNumber: this.pagination.pageSize,
				orderField: "",
				orderType: 1,
				queryData: {
					"id": 0,
					"title": this.form1.title,
					"emotionalPolarity": 0,
					"hot": "",
					"releaseTime": "",
					"releaseTimeEnd": this.form1.releaseTimeEnd ? this.form1.releaseTimeEnd.format('YYYY-MM-DD HH:mm:ss') : "",
					"releaseTimeStart": this.form1.releaseTimeStart ? this.form1.releaseTimeStart.format('YYYY-MM-DD HH:mm:ss') : "",
					"releaseTimeLong": 0,
					"flag": "",
					"content": "",
					"platform": this.form1.platform,
					"serialNumber": 0,
					"userId": 0,
					"permissionGroupId": 0,
					"commandId": this.$route.query.commandId,
					"createTimeLong": 0,
					"url": "",
					"urlMd5": ""
				},
			}

			getHotTrackHotSearchList(
					param
			).then(res => {
				this.data = res.data.records;
				this.pagination.total = res.data.total;
				this.total = res.data.total;
			})
		},
		searchData() {
			if (this.form1.releaseTimeStart && this.form1.releaseTimeEnd) {
				let start = new Date(this.form1.releaseTimeStart)
				let end = new Date(this.form1.releaseTimeEnd)
				if (start.getTime() > end.getTime()) {
					this.$message.error('起始时间不可以大于结束时间，请重新输入！')
					return;
				}
			}

			this.pagination.current = 1;
			let param = {
				page: this.pagination.current,
				pageNumber: this.pagination.pageSize,
				orderField: "",
				orderType: 1,
				queryData: {
					"id": 0,
					"title": this.form1.title,
					"emotionalPolarity": 0,
					"hot": "",
					"releaseTime": "",
					"releaseTimeEnd": this.form1.releaseTimeEnd ? this.form1.releaseTimeEnd.format('YYYY-MM-DD HH:mm:ss') : "",
					"releaseTimeStart": this.form1.releaseTimeStart ? this.form1.releaseTimeStart.format('YYYY-MM-DD HH:mm:ss') : "",
					"releaseTimeLong": 0,
					"flag": "",
					"content": "",
					"platform": this.form1.platform,
					"serialNumber": 0,
					"userId": 0,
					"permissionGroupId": 0,
					"commandId": this.$route.query.commandId,
					"createTimeLong": 0,
					"url": "",
					"urlMd5": ""
				},
			}

			getHotTrackHotSearchList(
					param
			).then(res => {
				this.data = res.data.records;
				this.pagination.total = res.data.total;
				this.total = res.data.total;
			})
		},
		handleClickRow(record) {
			this.$router.push({
				path: '/hotspottrackingoverview',
				query: {id: record.id, title: record.title, commandId: this.$route.query.commandId, flag: 1}
			})
		},
		del(record) {
			if (this.selectedRowKeys.length == 0) {
				this.$message.error('请选择记录');
			}
			if (this.selectedRowKeys.length > 0) {
				let id = [];
				this.rowData.forEach(item => {
					id.push(item.id)
				})
				console.log(id)
				id = id.join(',')
				let param = {
					idStr: id
				}

				confirm('确定删除该记录吗？', () => {
					deletedetaildata(param).then(res => {
						if (res.msg = '删除成功') {
							this.$message.success("删除成功");
							this.selectedRowKeys = []
							this.searchData()

						}
					})

				});
			}


		},
		onSelectChange(selectedRowKeys, selectedRows) {
			console.log('selectedRowKeys changed: ', selectedRowKeys);
			console.log(selectedRows)
			this.selectedRowKeys = selectedRowKeys;
			this.rowData = selectedRows
		},
		showxazx() {
			this.xazx_c = !this.xazx_c
		},
		showjt() {
			console.log(1)
			this.jt_c = !this.jt_c
		},
		showsgs() {
			this.sgs_c = !this.sgs_c
		},
		showzygs() {
			this.zygs_c = !this.zygs_c
		},
		showqt() {
			this.qt_c = !this.qt_c
		},
		if_zhapian(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.zhapian_option = true;
			}
			if (value == 2) {
				this.zhapian_option = false
			}
		},
		if_loudong(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.loudong_option = true;
			}
			if (value == 2) {
				this.loudong_option = false
			}
		},
		ifresou(value) {
			console.log(`selected ${value}`);
			if (value == 1) {
				this.resou_event = true;
			}
			if (value == 2) {
				this.resou_event = false;
			}
		},
		loudongku(value) {
			if (value == 1) {
				this.loudongku_event = true;
			}
			if (value == 2) {
				this.loudongku_event = false;
			}
		},

		addLetters() {
			this.num = Math.random();
			this.form.title = "";
			this.form.sendmedia = undefined;
			this.form.eventType = undefined;
			this.form.eventclasssify = undefined;
			this.form.eventclasssify1 = undefined;
			this.form.eventclasssify2 = undefined;
			this.form.key = undefined;
			this.form.originallink = undefined;
			this.form.mobilerelated = undefined;
			this.form.businessimpact = undefined;
			this.form.province01 = undefined;
			this.form.emotionalAcute = undefined;
			this.resou_event = false;
			this.zhapian_option = false;
			this.loudong_option = false;
			this.loudongku_event = false;
			if (this.selectedRowKeys.length == 0) {
				this.$message.error('请选择记录')
			}
			if (this.selectedRowKeys.length > 1) {
				this.$message.error('只能选择一条记录')
			}
			if (this.selectedRowKeys.length == 1) {
				if (this.$refs.ruleForm) {
					this.$refs.ruleForm.resetFields();
					this.form.xazx = []
					this.form.sgs = []
					this.form.zygs = []
					this.form.jt = []
					this.form.relatedepart = []
				}
				hotTrand({
					id: this.rowData[0].id
				}).then(res => {
					this.form.origintitle = res.data.hotTrackHotSearch.title
					this.form.content = res.data.hotTrackHotSearch.content
					this.form.emotionalAcute = res.data.hotTrackHotSearch.emotionalPolarity
					this.form.userId = res.data.hotTrackHotSearch.userId
				});

				this.visible3 = true;
			}

		},
		hideModal3() {
			if (this.form.title == '' || this.form.title == undefined) {
				this.$message.error('请输入事件标题')
				return;
			}
			if (this.form.sendmedia == '' || this.form.sendmedia == undefined) {
				this.$message.error('请输入发布媒体')
				return;
			}

			if (this.form.eventType == '' || this.form.eventType == undefined) {
				this.$message.error('请选择事件等级')
				return;
			}
			if (this.form.eventclasssify == '' || this.form.eventclasssify == undefined) {
				this.$message.error('请选择事件分类')
				return;
			}
			if (this.form.key == '' || this.form.key == undefined) {
				this.$message.error('请输入关键字')
				return;
			}
			if (this.form.content == '' || this.form.content == undefined) {
				this.$message.error('请输入内容简介')
				return;
			}
			if (this.form.originallink == '' || this.form.originallink == undefined) {
				this.$message.error('请输入原文链接')
				return;
			}
			if (this.form.origintitle == '' || this.form.origintitle == undefined) {
				this.$message.error('请输入原文标题')
				return;
			}
			if (this.form.mobilerelated == '' || this.form.mobilerelated == undefined) {
				this.$message.error('请选择移动相关')
				return;
			}
			if (this.form.businessimpact == '' || this.form.businessimpact == undefined) {
				this.$message.error('请选择业务影响')
				return;
			}
			if (this.form.emotionalAcute == '' || this.form.emotionalAcute == undefined) {
				this.$message.error('请选择情感极性')
				return;
			}


			let departmentList = []
			console.log(this.form.xazx)

			for (let i = 0; i < this.departmentoption.length; i++) {
				if (this.form.xazx == undefined || this.form.xazx == '') {

				} else {
					this.form.xazx.forEach(item => {
						if (item == this.departmentoption[i].id) {
							let obj = {}
							obj.id = this.departmentoption[i].id
							obj.category = this.departmentoption[i].category
							obj.name = this.departmentoption[i].name
							departmentList.push(obj)
						}
					})
				}
				if (this.form.sgs == undefined || this.form.sgs == '') {

				} else {
					this.form.sgs.forEach(item => {
						if (item == this.departmentoption[i].id) {
							let obj = {}
							obj.id = this.departmentoption[i].id
							obj.category = this.departmentoption[i].category
							obj.name = this.departmentoption[i].name
							departmentList.push(obj)
						}
					})
				}
				if (this.form.zygs == undefined || this.form.zygs == '') {

				} else {
					this.form.zygs.forEach(item => {
						if (item == this.departmentoption[i].id) {
							let obj = {}
							obj.id = this.departmentoption[i].id
							obj.category = this.departmentoption[i].category
							obj.name = this.departmentoption[i].name
							departmentList.push(obj)
						}
					})
				}
				if (this.form.jt == undefined || this.form.jt == '') {

				} else {
					this.form.jt.forEach(item => {
						if (item == this.departmentoption[i].id) {
							let obj = {}
							obj.id = this.departmentoption[i].id
							obj.category = this.departmentoption[i].category
							obj.name = this.departmentoption[i].name
							departmentList.push(obj)
						}
					})
				}
				if (this.form.relatedepart == undefined || this.form.relatedepart == '') {

				} else {
					this.form.relatedepart.forEach(item => {
						if (item == this.departmentoption[i].id) {
							let obj = {}
							obj.id = this.departmentoption[i].id
							obj.category = this.departmentoption[i].category
							obj.name = this.departmentoption[i].name
							departmentList.push(obj)
						}
					})
				}
			}
			if (this.form.vulnepublic) {
				this.form.vulnepublic = moment(this.form.vulnepublic).format('YYYY-MM-DD MM:HH:SS')
			}
			if (this.form.ld_event == undefined || this.form.ld_event == '') {
			} else {
				this.form.ld_event = this.form.ld_event.join(',')

			}
			if (this.form.zp_event == undefined || this.form.zp_event == '') {
			} else {
				this.form.zp_event = this.form.zp_event.join(',')
			}
			if (this.form.searchrank) {
				this.form.searchrank = Number(this.form.searchrank)
			}

			if (departmentList.length <= 0 || departmentList == []) {
				this.$message.error('请选择关联部门')
				return;
			}

			let params = {
				endTime: "",
				eventStartTime: "",
				eventTime: "",
				eventTimeStr: "",
				eventendTime: "",
				fileName: '',
				filePath: '',
				fileType: 0,
				reportEndTime: "",
				reportStartTime: "",
				reportTime: "",
				id: 0,
				eventTitle: this.form.title,
				submittedTime: "",
				endSubmittedTime: "",
				startSubmittedTime: "",
				submittedTimeLong: 0,
				releaseTime: "",
				endReleaseTime: "",
				releaseTimeLong: 0,
				startReleaseTime: "",
				informationSources: this.form.sendmedia,
				levelInference: this.form.eventType,
				oneEventType: this.form.eventclasssify,
				oneEventTypeStr: "",
				twoEventType: this.form.eventclasssify1,
				twoEventTypeStr: "",
				threeEventType: this.form.eventclasssify2,
				threeEventTypeStr: "",
				keyword: this.form.key,
				content: this.form.content,
				url: this.form.originallink,
				title: this.form.origintitle,
				mobile: this.form.mobilerelated,
				businessImpact: this.form.businessimpact,
				businessImpactName: "",
				province: this.form.province01,
				city: "",
				county: "",
				hot: this.form.ifsearch,
				hotBang: this.form.searchlist,
				hotRanking: this.form.searchrank,
				fraud: this.form.ifzp,
				fraudEvent: this.form.zp_event,
				hole: this.form.ifld,
				holeEvent: this.form.ld_event,
				holeLibrary: this.form.vulnerdata,
				holePublicTime: this.form.vulnepublic,
				cveId: this.form.CVEID,
				createTime: "",
				flag: 1,
				departmentId: 0,
				departmentList: departmentList,
				emotionalPolarity: this.form.emotionalAcute,
				userId: this.form.userId
			}
			addreport(params).then(res => {
				if (res.data) {
					this.$message.success('添加成功')
					this.zhapian_option = false;
					this.loudong_option = false;
					this.resou_event = false;
					this.loudongku_event = false;
				}
			})

			this.visible3 = false;
			this.selectedRowKeys = []

		},

		weibosofo() {
			this.$router.push({
				path: '/hotspottrackingoverview',

			})
		},

		// 返回列表页
		goHomePage() {
			this.$router.push({
				path: '/hotspottracking',
				query: {flag: 2}
			})
		},

		//添加預警弹框
		showWarning() {
			this.visible = true;
			this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;
		},
		totals() {
			console.log('111')
			this.$router.push({
				path: '/hotspottrackingoverview',

			})
		},
		onLoadMore() {
			let weibo1 = [];
			let weibo2 = [];
			this.loadingMore = true;
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					weibo2 = res.data.weibo.top10.weibo;
					this.weibomsg = this.weibomsg.concat(weibo2)
					console.log(this.weibomsg)
				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getIndexMiddle() {
			var weibo = []
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					console.log(res.data.weibo.top10)
					this.loading = false;
					for (let k = 0; k < res.data.weibo.top10.negative.length; k++) {
						weibo.push(res.data.weibo.top10.negative[k])
					}

					weibo.push(res.data.weibo.top10.neutral[0])
					weibo.push(res.data.weibo.top10.positive[0])
					this.weibomsg = weibo
					console.log(weibo)

				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getecharts() {
			const chart1 = this.$refs.chart1
			if (chart1) {
				const myChart = this.$echarts.init(chart1)
				let color = ['#ff5b01', '#fead32', '#1576fe', '#8b4cfe'];
				const option1 = {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						show: false,
						data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					],
					series: [
						{
							name: 'Email',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#879ad8', //改变折线点的颜色
									lineStyle: {
										color: '#879ad8' //改变折线颜色
									}
								}
							},
							data: [120, 132, 101, 134, 90, 230, 210, 220, 210]
						},
						{
							name: 'Union Ads',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#b2db9f', //改变折线点的颜色
									lineStyle: {
										color: '#b2db9f' //改变折线颜色
									}
								}
							},
							data: [220, 182, 191, 234, 290, 330, 310, 220, 210]
						},
						{
							name: 'Video Ads',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#fcd88a', //改变折线点的颜色
									lineStyle: {
										color: '#fcd88a' //改变折线颜色
									}
								}
							},
							data: [150, 232, 201, 154, 190, 330, 410, 220, 210]
						},
						{
							name: 'Direct',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#f49495', //改变折线点的颜色
									lineStyle: {
										color: '#f49495' //改变折线颜色
									}
								}
							},
							data: [320, 332, 301, 334, 390, 330, 320, 220, 210]
						},
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#77be9e', //改变折线点的颜色
									lineStyle: {
										color: '#77be9e' //改变折线颜色
									}
								}
							},
							data: [420, 432, 501, 534, 690, 1030, 1020, 120, 110]
						},
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#fda985', //改变折线点的颜色
									lineStyle: {
										color: '#fda985' //改变折线颜色
									}
								}
							},
							data: [520, 602, 601, 634, 790, 70, 70, 120, 110]
						}
						,
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#b891cc', //改变折线点的颜色
									lineStyle: {
										color: '#b891cc' //改变折线颜色
									}
								}
							},
							data: [720, 732, 701, 734, 1090, 1130, 1120, 220, 210]
						}
						,
						{
							name: 'Search Engine',
							type: 'line',
							stack: 'Total',
							smooth: true,//设置折线图平滑
							label: {
								show: false,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#efa4db', //改变折线点的颜色
									lineStyle: {
										color: '#efa4db' //改变折线颜色
									}
								}
							},
							data: [820, 932, 901, 934, 1290, 1330, 1320, 220, 210]
						}
						,

					]
				}

				myChart.setOption(option1)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第二个图表
			const chart2 = this.$refs.chart2
			if (chart2) {

				const myChart = this.$echarts.init(chart2)
				const option2 = {
					xAxis: {
						type: 'category',
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
					},
					yAxis: {},
					visualMap: {
						show: false,
						min: 0,
						max: 100,
						splitNumber: 20,
						inRange: {
							color: ['#5eb5e2', '#5eb5e2', '#5eb5e2'].reverse()
						},
						textStyle: {
							color: '#fff'
						}
					},
					series: [
						{
							symbolSize: 20,
							data: [
								[10.0, 8.04],
								[8.07, 6.95],
								[13.0, 7.58],
								[9.05, 8.81],
								[11.0, 8.33],
								[14.0, 7.66],
								[13.4, 6.81],
								[10.0, 6.33],
								[14.0, 8.96],
								[12.5, 6.82],
								[9.15, 7.2],
								[11.5, 7.2],
								[3.03, 4.23],
								[12.2, 7.83],
								[2.02, 4.47],
								[1.05, 3.33],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68]
							],
							type: 'scatter'
						}
					]
				}

				myChart.setOption(option2)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第三个图表
			const chart3 = this.$refs.chart3
			if (chart3) {

				const myChart = this.$echarts.init(chart3)
				const option3 = {
					title: {
						text: '近7天趋势',
						left: 'left',

						textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
							fontSize: 15,
							fontStyle: 'normal',
							fontWeight: 'normal',
						},
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23']
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						splitLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					series: [
						{
							data: [60, 38, 65, 52, 100],
							type: 'line',
							itemStyle: {
								normal: {
									lineStyle: {  //线的颜色
										color: '#ff5b01'
									},
								},
							},
						}
					]
				}

				myChart.setOption(option3)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},
		changeStyle(value) {
			if (value == 1) {
				this.changeSelectStyle = '全部'
			}
			if (value == 2) {
				this.changeSelectStyle = '微博热搜'
			}
			if (value == 3) {
				this.changeSelectStyle = '百度热搜'
			}
			if (value == 4) {
				this.changeSelectStyle = '今日头条'
			}
		},
		changeStyles(value) {
			if (value == 1) {
				this.changeSelectStyles = '全部'
			}
			if (value == 2) {
				this.changeSelectStyles = '社会'
			}
			if (value == 3) {
				this.changeSelectStyles = '互联网'
			}
			if (value == 4) {
				this.changeSelectStyles = '娱乐'
			}
			if (value == 5) {
				this.changeSelectStyles = '国际'
			}
			if (value == 6) {
				this.changeSelectStyles = '财经'
			}
			if (value == 7) {
				this.changeSelectStyles = '游戏'
			}
		},

		hideModal(checkedValues) {
			if (this.warningForm.taskName == '' || this.warningForm.taskName == null || this.warningForm.taskName == undefined) {
				this.$message.error('请输入任务名称');
				return;
			}
			if (this.warningForm.warningKeyword == '' || this.warningForm.warningKeyword == null || this.warningForm.warningKeyword == undefined) {
				this.$message.error('请输入添加预警关键词');
				return;
			}
			if (this.warningForm.warningPlatform == '' || this.warningForm.warningPlatform == null || this.warningForm.warningPlatform == undefined) {
				this.$message.error('请输入添加预警平台');
				return;
			}
			if (this.warningForm.rank == '' || this.warningForm.rank == null || this.warningForm.rank == undefined) {
				this.$message.error('请输入添加预警形式');
				return;
			}
			if (this.warningForm.startTime == '' || this.warningForm.startTime == null || this.warningForm.startTime == undefined) {
				this.$message.error('请输入预警起始时间');
				return;
			}
			if (this.warningForm.endTime == '' || this.warningForm.endTime == null || this.warningForm.endTime == undefined) {
				this.$message.error('请输入预警结束时间')
				return;
			}
			let start = new Date(this.warningForm.startTime)
			let end = new Date(this.warningForm.endTime)
			if (start.getTime() > end.getTime()) {
				this.$message.error('起始时间不可以大于结束时间，请重新输入！')
				return;
			}


			// 添加预警
			addWarning({
				taskName: this.warningForm.taskName,
				warningKeyword: this.warningForm.warningKeyword,
				warningPlatform: this.warningForm.warningPlatform.join(","),
				rank: this.warningForm.rank,
				startTime: this.warningForm.startTime ? this.warningForm.startTime.format('YYYY-MM-DD HH:mm:ss') : '',
				endTime: this.warningForm.endTime ? this.warningForm.endTime.format('YYYY-MM-DD HH:mm:ss') : '',
				warningPush: this.warningForm.warningPush ? 1 : 0,
				subscribe: this.warningForm.subscribe ? 1 : 0,

			}).then(res => {
				if (res.status == 200) {
					this.$message.success('规则创建成功！日志正在生成中，请等待...');
					this.searchData()
					this.warningForm = {}
				} else {
					this.$message.error('执行失败');
				}
			});
			this.visible = false;
			this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;
		},

		onChange(checkedValues) {
			console.log('checked = ', checkedValues);
			console.log('checked = ', checkedValues.length);

			this.label = checkedValues;
		},

		suyuan() {
			this.$router.push({
				path: '/generalDetectionroots',

			})
		},
		suyuanNews() {
			this.$router.push({
				path: '/generalDetectionNewsroots',

			})
		},
		changePageInfo() {
			this.$router.push({
				path: '/generalDetectionInfo',
			})
		},

		/*删除*/
		deleteinfomation() {
			this.$message.success("删除成功");
		},
		/*排序*/
		sequenceInfomation() {
			this.orderBy = !this.orderBy;
			getInfo({
				orderBy: this.orderBy
			}).then(res => {
				/*模拟数据变化 生成环境需要更改下面的代码*/
				if (this.orderBy) {
					this.listData = res.data.list;
				} else {
					this.listData = res.data.list.reverse();
				}
				this.pagination.total = this.listData.length;
				this.total = this.listData.length;
			})
		},
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},

		tuisong() {
			this.$message.success("推送成功");
		},
		subscribe() {
			this.$message.success("订阅成功");
		},
		collection() {
			this.$message.success("收藏成功");
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},
		getHotTrackHotSearchLists() {
			let param = {
				page: this.pagination.current,
				pageNumber: this.pagination.pageSize,
				orderField: "",
				orderType: 1,
				queryData: {
					"id": 0,
					"title": "",
					"emotionalPolarity": 0,
					"hot": "",
					"releaseTime": "",
					"releaseTimeEnd": "",
					"releaseTimeStart": "",
					"releaseTimeLong": 0,
					"flag": "",
					"content": "",
					"platform": "",
					"serialNumber": 0,
					"userId": 0,
					"permissionGroupId": 0,
					"commandId": this.$route.query.commandId,
					"createTimeLong": 0,
					"url": "",
					"urlMd5": ""
				},
			}
			getHotTrackHotSearchList(
					param
			).then(res => {
				this.data = res.data.records;
				this.pagination.total = res.data.total;
				this.total = res.data.total;
			})
		}


	},
	mounted() {
		// getRuleId().then(res => {
		// 	// 如果角色是普通业务人员
		// 	if (res.data != "ROLE.ORDINARY.BUSINESS") {
		// 		this.ruleFlag = 1;
		// 	}
		// });


		this.form.ifzp = "2"
		this.form.ifld = "2"
		this.form.ifsearch = "2"
		this.form.vulnerdata = "2"
		this.getHotTrackHotSearchLists()
		businessimpactoption().then(res => {
			this.businessimpactoption = res.data
		})

		this.getecharts();
		this.getIndexMiddle()
		oneEventtype().then(res => {
			this.oneeventtype = res.data
		})
		getprovice().then(res => {
			this.getprovice = res.data.provincelist
		})
		getDepartment().then(res => {
			let department = []
			department = res.data
			this.departmentoption = res.data
			for (let i = 0; i < department.length; i++) {
				if (department[i].category == '信安中心') {
					this.department_xa.push(department[i])
				}
				if (department[i].category == '集团') {
					this.department_jt.push(department[i])
				}
				if (department[i].category == '其他') {
					this.department_qt.push(department[i])
				}
				if (department[i].category == '专业公司') {
					this.department_zygs.push(department[i])
				}
				if (department[i].category == '省公司') {
					this.department_sgs.push(department[i])
				}
			}

		})
	},


}
</script>

<style lang="scss" scoped>
/deep/ .time1 .ant-form-item-control {
	width: 180px;

}

/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
	margin-left: 0px
}

/deep/ .zhapian_check.ant-checkbox-group {
	line-height: 2.5
}

/deep/ .checkboxs .ant-checkbox-group {
	line-height: 2.5
}

/deep/ .bangdan .ant-form-item-label {
	margin-top: 4px;
	margin-left: 55px
}

/deep/ .bangdan .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -34px;
	margin-left: 132px;
	width: 25px;
}

/deep/ .yujing .ant-form-item-label {
	margin-top: -16px;
	margin-left: 55px
}

/deep/ .yujing .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -47px;
	margin-left: 132px;
	width: 30px;
}

.modal-box2 /deep/ .ant-modal-body {
	min-height: 215px
}

.modal-box2 /deep/ .ant-modal-footer {
	min-height: 60px
}

/deep/ .eventtype.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype1.ant-select {
	margin-left: -30px !important;
	width: 150px

}

/deep/ .eventtype2.ant-select {
	margin-left: -20px !important;
	width: 150px

}

/deep/ .eventtype3.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype4 .ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype5 ant-form-item-control {
	//margin-left:20px!important;
	width: 100px

}


/deep/ .ant-progress-text {
	display: none;
}

/deep/ .ant-progress-bg {
	height: 18px
}

/deep/ .addWarning {
	margin: 0;
	padding: 0;
}

/deep/ .addWarning .ant-form-item-label {
	margin-top: 0px;
	margin-left: 0px;
}

/deep/ .addWarning .ant-form-item-control {
	text-align: unset;
	line-height: 30px;
	margin-top: 0px;
	margin-left: 0px;
	width: auto;
	padding-top: 0px;
}

.chart0 {
	height: 572px;
	width: 1074px;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px
}

.chart1 {
	height: 90%;
	width: 100%;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px;
	display: flex;
	flex-wrap: wrap
}

.button01 {
	width: 50%;
	background-color: #e8f1ff;
	display: flex;
	justify-content: space-around;
	padding-top: 8px;
	padding-bottom: 8px
}

/deep/ .ant-list-split .ant-list-item {
	border-bottom: 1px solid #f7f7f7;
	margin-left: 20px;
	margin-right: 10px
}

/deep/ .ant-list-item-meta-title {
	margin-bottom: 4px;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	line-height: 17px;
}

/deep/ .ant-list-item {
	padding: 10px 0;
}

.changeStyle {
	background-color: #1470f2;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.changeStyles {
	background-color: #1470f2;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.main {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

.addyj {
	margin-left: 1215px;
	margin-bottom: -20px;
	padding: 6px;
	background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
	border-radius: 5px;
	background-position: 10px;
	cursor: pointer;
}

.one {
	background-color: #f7f7f7;
	display: flex;
	height: 65px;
	width: 100%;
}

.one_left {
	width: 70%;
	display: flex;
	//justify-content: space-around;
}

.one_right {
	width: 30%;
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	margin-bottom: 21px
}

.two {
	display: flex;
	height: 550px;
	width: 100%;
}

.two_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;
	height: 100%

}

.two_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.three {
	height: 560px;
	display: flex;
	width: 100%
}

.three_left {
	width: 68%;
	display: flex;
	flex-wrap: wrap;

}

.three_right {
	width: 32%;
	display: flex;
	flex-wrap: wrap;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 500px;
}

.modal-box /deep/ .ant-modal-content {
	height: 600px;
}

.right-content {
	margin-bottom: 40px;
	width: 100%;
	height: calc((100% - 90px));
	overflow-y: auto;

}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}


/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	border: solid #F0F0F0 1px;
	text-align: center;
	padding-left: 1%;
	padding-right: 1%;
	margin-right: 1%;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.buttonDiv {
	width: 100%;
	height: auto;

	/*  display: flex;*/
}

@media screen and (max-device-width: 1920px) {
	.buttonDiv {
		height: auto;
		/*  padding-top: 2%;*/
		/*   display: flex;*/
	}
	#pieChart {
		width: 595px;
	}
}


</style>
